<template>
  <div>
    <div class="nav" :class="{'nav-left':isleft}">
      <div><a @click="toActive('/two')">2048</a></div>
      <div><a @click="toActive('/sudoku')">数独</a></div>
      <div><a @click="toActive('/fantu')">翻图</a></div>
      <div><a @click="toActive('/qrcode')">自定义二维码</a></div>
<!--      <div><a @click="toActive('/rubik1of1')">魔方</a></div>-->
      <div><a @click="toActive('/rubikX')">魔方beta1.6</a></div>
<!--      <div><a @click="toActive('/three')">3d</a></div>-->

      <div><a @click="toActive('/rubik')">魔方1.5.3</a></div>
      <div><a @click="toActive('/oneLayerRubik')">单层魔方</a></div>
      <div><a @click="toActive('/rubikCube2')">rubik test</a></div>
      <div><a @click="toActive('/RegularTwentyAspect')">正十二面体</a></div>
      <div><a @click="toActive('/testTT')">testTT</a></div>
<!--      <div><a @click="toActive('/threeTest')">threeTest</a></div>-->
<!--      <div><a @click="toActive('/tzfe')">2048</a></div>-->

      <div id="toLeft"
           class="colLeft"
           @click="navToLeft"
           :class="{'btn-left':isleft}"
           style="user-select: none">&#8249;</div>
    </div>

    <transition name="component-fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  export default {
    name:'app',
    data(){
      return {
        isleft:true,
      }
    },
    components:{
    },
    computed: {
    },
    methods:{

      navToLeft(){
        this.isleft=!this.isleft;
      },
      toActive(path){
        this.navToLeft()
        this.$router.replace(path).catch(()=>{})
      },

    },
    mounted() {
    }
  }
</script>

<style>
  body{
    /*-webkit-user-select:none;*/

    /*-moz-user-select:none;*/

    /*-ms-user-select:none;*/

    /*user-select:none;*/
    margin: 0;
    background-color: #faf8ef;
  }
  .nav .btn-left{
    transform: rotateY(180deg);
    transform-origin:100% 50%;
    transition: all .4s;
  }
  .nav{
    transition: all .4s;
    z-index: 10000;
    color:#fff;
    background-color: rgb(85,85,85);
    width: 285px;
    position: fixed;
    left: 0;top: 0;bottom: 0;
    padding-top: 30px;
  }
  .nav-left{
    left:-285px;
  }
  .nav div{
    width: 285px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
  }
  .nav div a{
    color:#fff;
    text-decoration: none;
    padding-bottom: 5px;
    cursor:pointer;
  }
  .nav div a:hover{
    border-bottom: #0f0f0f 3px solid;
  }
  #toLeft{
    font-size: 20px;
    position: absolute;
    line-height: 80px;
    top: 170px;
    left: 255px;
    width: 30px;
    height: 80px;
    border-bottom-left-radius:20px ;
    border-top-left-radius:20px ;
    transition: all .4s;
  }
  .colLeft{
    background-color: #4fc08d;
  }
  .colLeft:hover{
    background-color: #51edaf;
  }
  .time{
    position: fixed;
    bottom: 0;
  }
  .component-fade-enter-active, .component-fade-leave-active {
    transition: all ease-out .18s;
  }
  .component-fade-enter{
    transform: translateX(-100%);
  }
  .component-fade-leave-to{
    transform: translateX(100%);
  }
</style>
